<!--
 * @Description: 
 * @Date: 2021-12-30 11:13:29
 * @LastEditTime: 2021-12-30 17:46:01
-->
<template>
    <div class="fu">
    <div class="contain">
        <el-row :gutter="20">
            <el-col  :xs="2" :sm="4" :md="6" :lg="6" :xl="6"
                ><div style="text-align:left;color:#ef7418;line-height:60px;font-weight:700;font-size:0.1042rem">BIGSMART</div
            ></el-col>
            <el-col  :xs="22" :sm="20" :md="18" :lg="18" :xl="18" 
                ><div class="grid-content bg-purple">
                    <el-menu :default-active="activeIndex" style="display:flex;justify-content:space-between;" mode="horizontal" @select="handleSelect" router >
                        <el-menu-item  index="1">首页</el-menu-item>
                        <el-menu-item  index="2">关于我们</el-menu-item>
                        <el-menu-item  index="路由">情报统计</el-menu-item>
                        <el-menu-item  index="4">合作伙伴</el-menu-item>
                        <el-menu-item  index="5">查询语法</el-menu-item>
                        <el-menu-item  index="6"><a href="https://www.ele.me" target="_blank">会员中心</a></el-menu-item>
                    </el-menu>
                </div>
            </el-col>
        </el-row>
        <el-row style="taxt-align:center;margin:0 1.5625rem">
            <el-col :span="18">
                <div style=" margin：0.2604rem auto">
                <el-input placeholder="请输入内容" v-model="input3" clearable class="input-with-select">
                    <!-- <el-button slot="append" icon="el-icon-search">搜索</el-button> -->
                    <el-button slot="append"  icon="el-icon-search">搜索</el-button>
                </el-input>
                </div>
            </el-col>
        </el-row>
        
    </div>
    </div>
</template>

<script>
export default {
    data() {
      return {
        activeIndex: '1',
        input3:''
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
};
</script>

<style scoped>
.fu{
    background-color: #fff ; 
}
.contain {
    width: 8.3333rem;
    margin: 0 auto;
    background-color: #fff;
   
}

     ::v-deep .el-menu-item{
        /* padding: 0 0.3646rem !important; */
    }
    ::v-deep .el-menu.el-menu--horizontal {
    border-bottom: 0;
}
    ::v-deep .el-menu :nth-last-child(){
        color: red ;
    }
   ::v-deep .el-menu::after, .el-menu::before {
    display: none;
    content: "";
}
   ::v-deep .el-input-group{
       margin: 0.2604rem auto;
    }

   ::v-deep .el-input-group__append button.el-button, .el-input-group__append div.el-select .el-input__inner, .el-input-group__append div.el-select:hover .el-input__inner, .el-input-group__prepend button.el-button, .el-input-group__prepend div.el-select .el-input__inner, .el-input-group__prepend div.el-select:hover .el-input__inner {
    background-color: #4c7ae3;
    color: #fff;
    border-top: 1px solid #2f7ce3;
    border-bottom: 1px solid #2f7ce3;
}   
 ::v-deep .el-button{
         border-radius: 0;
   }
</style>
